import React, { useState,useEffect } from 'react'
import { MemberEntity } from './model'
import { getMembersCollection } from './api'

export default function Member() {
    // 自定义hooks 
    const usememberCollection = () => {
        const [memberCollection,setMemberCollection] 
        = useState<MemberEntity[]>([])
        const loadMeberCollection = async () => {
            const memberCollection = await getMembersCollection()
            setMemberCollection(memberCollection)
        }
        return {
            memberCollection,
            loadMeberCollection
        }
    }
    const {
        memberCollection,
        loadMeberCollection
    } = usememberCollection()
    useEffect(() => {
        loadMeberCollection()
    },[])
  return (
    <div>
        <table>
            <thead>
                <tr>
                    <th>Avatar</th>
                    <th>Id</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                {
                    memberCollection.map(member => (
                        <MemberRow key={member.id} member={member}/>
                    ))
                }
            </tbody>
        </table>
    </div>
  )
}
interface MemberRowProps {
    member:MemberEntity
}
const MemberRow : React.FC<MemberRowProps > = (props) => {
    const {member} = props
    return (
    <tr>
        <td>
            <img src={member.avatar_url} style={{maxWidth:"10rem"}}alt =""/>
        </td>
        <td>
            <span>
                {member.id}
            </span>
        </td>
        <td>
            <span>
                {member.login}
            </span>
        </td>
    </tr>
    )
}
